<script setup>
  import { ref, onMounted, computed, watch, nextTick, onUnmounted } from 'vue';
  import { 
    ElButton, 
    ElDialog, 
    ElInput, 
    ElInputNumber, 
    ElColorPicker, 
    ElSelect, 
    ElOption, 
    ElCheckbox, 
    ElCheckboxGroup,
  } from 'element-plus'
  import 'element-plus/dist/index.css'
  import L from "leaflet";
  import 'leaflet/dist/leaflet.css';
  import '../assets/plug/proj4.js'
  import '../assets/plug/proj4leaflet.js' 
  import '../assets/plug/tileLayer.baidu.js'
  import '../assets/plug/leaflet.ajax.js'
  import '../assets/plug/rbush.js'
  import '../assets/plug/Leaflet.LayerGroup.Collision.js'
  import '../assets/plug/L.Icon.Pulse/L.Icon.Pulse.js'
  import '../assets/plug/L.Icon.Pulse/L.Icon.Pulse.css'
  import shenzhenJson from '@/assets/datas/ShenZhen_CGCS2000.json?url'
  import shenzhenStreetJson from '@/assets/datas/ShenZhenStreet_CGCS2000.json?url'
  import shenshanJson from '@/assets/datas/ShenShan.geojson?url'
  import guangdongJson from '@/assets/datas/guangdong.json?url'
  import streetsNameJson from '@/assets/datas/streets.json'
  import areaNameJson from '@/assets/datas/area.json'
  import obtJson from '@/assets/datas/obt.json?url'
  import 'leaflet.fullscreen'
  import 'leaflet.fullscreen/Control.FullScreen.css'
  import 'leaflet-draw';
  import 'leaflet-draw/dist/leaflet.draw.css';
  import '@geoman-io/leaflet-geoman-free';  
  import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
  import _ from 'lodash';
  import { getStationList } from '@/api/index.js';
  // 添加抽屉状态控制
  const isDrawerOpen = ref(true);
  
  // 添加站点控制状态
  // const isObtLayerVisible = ref(true);
  const obtMarkers = ref([]);
  window.obtLayerGroup=null
  // const obtLayerGroup = ref(null);
  
  // 添加区域筛选相关的响应式变量
  const areaNames = ref(['罗湖区','南山区','福田区','宝安区','龙岗区','龙华区','盐田区','光明区','坪山区','大鹏新区','深汕特别合作区']); // 存储所有区域名称
  const selectedAreas = ref([]);
  const selectAllAreas = ref(false);
  // const areaMarkers = ref({}); // 存储不同区域的markers
  window.areaMarker={}
  // 修改选中站点的控制，默认所有站点都选中
  const selectedStations = ref(new Set()); // 存储未选中的站点ID（改为存储隐藏的站点）
  
  // 添加碰撞检测控制状态
  const isCollisionEnabled = ref(false);
  
  // 添加搜索相关的响应式变量
  const searchQuery = ref('');
  
  // 添加悬停标记相关的变量
  const hoverMarker = ref(null);
  
  // 添加站点类型树的数据和选中状态
  const stationTypeTree = ref([
    // 自动站始终排在第一位
    {
      "id": "自动站",
      "label": "自动站",
      "children": []
    },
    // 其他类型按照标签字数排序
    {
      "id": "日照计",
      "label": "日照计",
      "children": []
    },
    {
      "id": "云高仪",
      "label": "云高仪",
      "children": []
    },
    {
      "id": "回南天",
      "label": "回南天",
      "children": []
    },
    {
      "id": "闪电定位",
      "label": "闪电定位",
      "children": []
    },
    {
      "id": "风廓线",
      "label": "风廓线",
      "children": []
    },
    {
      "id": "舒适度仪",
      "label": "舒适度仪",
      "children": []
    },
    {
      "id": "通量系统",
      "label": "通量系统",
      "children": []
    },
    {
      "id": "大气成分",
      "label": "大气成分",
      "children": []
    },
    {
      "id": "微气候室",
      "label": "微气候室",
      "children": []
    },
    {
      "id": "大气电场仪",
      "label": "大气电场仪",
      "children": []
    },
    {
      "id": "天气雷达",
      "label": "天气雷达",
      "children": []
    },
    {
      "id": "微波辐射计",
      "label": "微波辐射计",
      "children": []
    },
    {
      "id": "风廓线雷达",
      "label": "风廓线雷达",
      "children": []
    },
    {
      "id": "太阳辐射",
      "label": "太阳辐射",
      "children": []
    },
    {
      "id": "温室气体",
      "label": "温室气体",
      "children": []
    },
    {
      "id": "x波段雷达",
      "label": "x波段雷达",
      "children": []
    },
    {
      "id": "GNSS/MET",
      "label": "GNSS/MET",
      "children": []
    },
    {
      "id": "多下垫面地温",
      "label": "多下垫面地温",
      "children": []
    },
    {
      "id": "气象实景视频",
      "label": "气象实景视频",
      "children": []
    },
    {
      "id": "自动站-智能杆",
      "label": "自动站-智能杆",
      "children": []
    },
    {
      "id": "自动站-船载站",
      "label": "自动站-船载站",
      "children": []
    },
    {
      "id": "自动站-潮汐站",
      "label": "自动站-潮汐站",
      "children": []
    },
    {
      "id": "激光雨滴谱仪",
      "label": "激光雨滴谱仪",
      "children": []
    },
    {
      "id": "气象梯度观测塔",
      "label": "气象梯度观测塔",
      "children": []
    }
  ]);
  // 修改 checkedStationTypes 的初始值为空数组
  const checkedStationTypes = ref([]);
  
  // 添加一个新的 ref 来存储 marker 副本
  const markerClones = ref(new Map());
  
  // 在 setup 中创建全局 marker 实例
  const pulseMarker = ref(null);
  
  // 添加绘制图层
  const drawnItems = ref(null);
  
  // 添加绘制样式配置
  const drawingStyle = ref({
    color: '#3388ff',
    fillColor: '#3388ff',
    weight: 2,
    fillOpacity: 0.2,
    dashArray: null, // null 表示实线，'5, 10' 表示虚线
    lineCap: 'round',
    lineJoin: 'round'
  });
  
  // 添加虚线样式选项
  const dashStyles = [
    { label: '实线', value: null },
    { label: '虚线', value: '5, 10' },
    { label: '点线', value: '1, 10' },
    { label: '点划线', value: '15, 10, 1, 10' }
  ];
  
  // 在 script 标签最前面添加
  const markerIcon = L.icon({
    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
    iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });
  
  // 添加弹窗控制状态
  const showStylePanel = ref(false);
  
  // 添加控制弹窗的方法
  const toggleStylePanel = () => {
    showStylePanel.value = !showStylePanel.value;
  };
  
  // 添加站名显示控制状态
  const showStationLabel = ref(false);  // 控制站名显示
  const showStationId = ref(false);     // 控制站号显示
  
  // 修改站名显示切换方法
  const toggleStationLabel = () => {
    showStationLabel.value = !showStationLabel.value;
    updateStationMarkers();
  };
  
  // 添加站号显示切换方法
  const toggleStationId = () => {
    showStationId.value = !showStationId.value;
    updateStationMarkers();
  };
  
  // 修改站点类型分类函数
  const classifyStationsByType = () => {
    // 获取所有区域的站点
    const allStations = Object.values(window.areaMarker).flat();
    
    // 获取所有站点类型
    const obtsByType = {};
    
    // 首先收集所有可能的类型
    allStations.forEach(station => {
      if (!station || !station.categoryname) return;
      if (!obtsByType[station.categoryname]) {
        obtsByType[station.categoryname] = [];
      }
    });
  
    // 如果没有任何类型，添加"其它"类型
    if (Object.keys(obtsByType).length === 0) {
      obtsByType['其它'] = [];
    }
  
    // 将站点分类到对应类型中
    allStations.forEach(station => {
      if (!station || !station.stationId) return;
      
      const category = station.categoryname || '其它';
      if (obtsByType[category]) {
        obtsByType[category].push(station);
      } else {
        obtsByType['其它'].push(station);
      }
    });
  
    // 返回适用于按钮显示的数据结构
    return Object.keys(obtsByType);
  };
  
  const  selectList=ref([])
  
  // 修改 filteredStations 计算属性
  const filteredStations = computed(() => {
    // 获取所有站点
    let stations = Object.values(window.areaMarker).flat();
    
    // 1. 根据选中的区域筛选站点列表
    if (selectedAreas.value.length > 0) {
      stations = stations.filter(station => {
        return selectedAreas.value.some(area => 
          window.areaMarker[area] && window.areaMarker[area].includes(station)
        );
      });
    }
  
    // 2. 根据选中的类型筛选
    if (checkedStationTypes.value.length > 0) {
      stations = stations.filter(station => 
        checkedStationTypes.value.includes(station.categoryname)
      );
    }
  
    return stations;
  });
  
  // 添加站点数量计算属性
  const currentStationCount = computed(() => {
    return filteredStations.value?.length || 0;
  });
  // 修改处理函数
  const handleCheck = (data, { checkedNodes, checkedKeys }) => {
    // 更新选中的站点类型
    
   const checkedTypes = checkedKeys.filter(key => 
      typeof key === 'string' && 
      ['自动站', '微站', '雨量站', '龙华自建站', '潮位站', '船载站', '其它'].includes(key)
    );
    
    // 更新选中列表（保持原有逻辑）
    selectList.value = checkedKeys;
    
    // 更新站点显示（保持原有逻辑）
    updateStationMarkers();
  };
  
  // 添加获取所有树节点的辅助函数
  const getAllTreeNodes = (nodes) => {
    let allNodes = [];
    nodes.forEach(node => {
      allNodes.push(node);
      if (node.children) {
        allNodes = allNodes.concat(getAllTreeNodes(node.children));
      }
    });
    return allNodes;
  };
  
  // 修改计算属性来控制树节点的选中状态
  const getCheckedKeys = computed(() => {
    if (!window.areaMarker) return [];
    
    const allStations = Object.values(window.areaMarker).flat();
    const checkedKeys = [];
    
    // 添加选中的站点类型
    const stationTypes = new Set(allStations.map(station => station.categoryname));
    stationTypes.forEach(type => {
      if (selectList.value.includes(type)) {
        checkedKeys.push(type);
      }
    });
    
    // 添加选中的单个站点
    allStations.forEach(station => {
      if (!selectedStations.value.has(station.stationId)) {
        checkedKeys.push(station.stationId);
      }
    });
    
    return checkedKeys;
  });
  
  const toggleDrawer = () => {
    isDrawerOpen.value = !isDrawerOpen.value;
  };
  
  // 添加一个 Set 来记录已经初始化过的区域
  const initializedAreas = ref(new Set());
  
  // 修改切换区域显示函数
  const toggleArea = (area) => {
    const index = selectedAreas.value.indexOf(area);
    if (index === -1) {
      selectedAreas.value.push(area);
    } else {
      selectedAreas.value.splice(index, 1);
    }
    // 不再调用 updateStationMarkers
  };
  
  // 修改站点显示控制函数
  const toggleStation = (station) => {
    if (!station || !station.stationId) return;

    let marker = null;
    for (const area in window.areaMarker) {
      marker = window.areaMarker[area].find(m => m.stationId === station.stationId);
      if (marker) break;
    }

    if (!marker) return;

    if (selectedStations.value.has(station.stationId)) {
      // 选中站点
      selectedStations.value.delete(station.stationId);
      // 更新站点显示
      updateStationMarkers();
      // 添加到已添加站点列表（保持排序）
      const allStations = Object.values(window.areaMarker).flat();
      const sortedStations = allStations
        .filter(s => !selectedStations.value.has(s.stationId))
        .map(s => ({
          title: s.options.title,
          stationId: s.stationId,
          categoryname: s.categoryname
        }));
      visibleStations.value = sortedStations;
    } else {
      // 取消选中
      selectedStations.value.add(station.stationId);
      // 从地图上移除
      window.obtLayerGroup.removeLayer(marker);
      // 从已添加站点列表中移除
      visibleStations.value = visibleStations.value.filter(s => s.stationId !== station.stationId);
    }
  };
  
  // 修改碰撞检测控制函数
  
  
  // 修改全屏切换函数
  const toggleFullscreen = () => {
    const map = window.map;
    if (!document.fullscreenElement) {
      // 进入全屏
      map.getContainer().requestFullscreen();
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  };
  
  // 修改站点悬停处理函数
  const handleStationHover = (marker) => {
    if (!marker) return;
  
    try {
      // 获取经纬度
      let lat, lng;
      if (marker.getLatLng) {
        const latLng = marker.getLatLng();
        if (!latLng) return;
        lat = latLng.lat;
        lng = latLng.lng;
      } else if (marker.LATITUDE && marker.LONGITUDE) {
        lat = parseFloat(marker.LATITUDE);
        lng = parseFloat(marker.LONGITUDE);
        if (isNaN(lat) || isNaN(lng)) return;
      } else {
        return;
      }
  
      // 更新 marker 位置并添加到地图
      pulseMarker.value.setLatLng([lat, lng]).addTo(window.map);
    } catch (error) {
      console.error('处理悬停效果时出错:', error);
    }
  };
  
  // 修改站点悬停结束处理函数
  const handleStationLeave = () => {
    try {
      if (pulseMarker.value && window.map.hasLayer(pulseMarker.value)) {
        window.map.removeLayer(pulseMarker.value);
      }
    } catch (error) {
      console.error('移除悬停效果时出错:', error);
    }
  };
  
  // 添加站点点击处理函数
  const handleStationClick = (station) => {
    if (!station) return;
    
    // 查找对应的 marker
    let marker = null;
    for (const area in window.areaMarker) {
      marker = window.areaMarker[area].find(m => m.stationId === station.stationId);
      if (marker) break;
    }

    if (!marker) return;

    // 获取经纬度
    const latLng = marker.getLatLng();
    if (!latLng) return;

    // 添加悬停效果
    window.map.once('moveend', () => {
      handleStationLeave();
    });
    handleStationHover(marker);

    // 飞到站点位置
    window.map.flyTo(latLng, 14, {
      duration: 1.5,
      easeLinearity: 0.25
    });
  };
  
  // 在组件卸载时清理
  onUnmounted(() => {
    if (pulseMarker.value && window.map.hasLayer(pulseMarker.value)) {
      window.map.removeLayer(pulseMarker.value);
    }
    pulseMarker.value = null;
  });
  
  // 添加控制状态
  const showStationList = ref(true);
  
  // 修改 visibleStations 计算属性
  const visibleStations = ref([]);
  
  // 添加 initMap 函数定义
  const initMap = async () => {
    // 如果地图已经初始化，直接返回
    // if (window.map) {
    //   console.warn('Map is already initialized');
    //   // return;
    // }
  
    var featureStyle = {
      color: '#ff7800',
      weight: 1,
      opacity: 0.7,
      fill: false,
    };
  
    var streetStyle = {
      color: '#c1bcc3',
      weight: 1,
      opacity: 0.5,
      pane: 'tilePane',
      fill: false,
    };
    var featureStyle2 = { color: '#e4b629', weight: 1, opacity: 0.7 };
    
    // 地图初始化
    const option = {
      attributionControl: false,
      center: [22.658224274516236, 114.1415038414494],
      zoom: 10.9,
      zoomControl: false,
      maxZoom: 15,
      minZoom: 7,
      wheelDebounceTime: 10,
      preferCanvas: true, // 启用canvas渲染
      renderer: L.canvas(), // 显式指定canvas渲染器

      wheelPxPerZoomLevel: 100,
    }
    
    // 使用全局变量存储地图实例
    window.map = L.map("map", option);
    // 基础图层定义
    var baiduMap = new L.tileLayer.baidu();  // 百度矢量图层
    // var baiduCustomMap = new L.tileLayer.baidu({ layer: 'MyDitu' });  // 百度自定义图层
    var baidimgMap = new L.tileLayer.baidu({ layer: 'img_d' });  // 百度影像图层
  
    let impleLayer = L.tileLayer('http://www.gasoftware.com.cn/map/2.0.0/simple/{z}/{x}/{y}.png', {
      id: 'simpleLayer',
      maxZoom: 18,
      maxNativeZoom: 12,
    });
  
    // 基础图层配置
    var baseMaps = {
      "百度简图": impleLayer,
      // "百度简图": baiduCustomMap,
      "百度标准": baiduMap,
      "百度影像": baidimgMap
    };
  
    // 添加图层切换事件监听
    window.map.on('baselayerchange', function (e) {
      const n = e.name;
      const center = window.map.getCenter();
      const zoom = window.map.getZoom();
  
      let featureStyle;
      if (n === '百度简图') {
        featureStyle = {
          fill: false,
          color: '#ff7800',
          weight: 1,
          opacity: 0.7,
        };
        window.map.options.crs = L.CRS.EPSG3857;
      } else if (n === '百度标准') {
        featureStyle = {
          fill: false,
          color: '#463ba9',
          weight: 1,
          opacity: 1,
        };
        window.map.options.crs = L.CRS.Baidu;
      } else if (n === '百度影像') {
        featureStyle = {
          fill: false,
          color: '#dcfcff',
          weight: 1,
          opacity: 1,
        };
        window.map.options.crs = L.CRS.Baidu;
      }
  
      window.map._resetView(center, zoom, true);
  
      // 更新图层样式
   
    });
  
    // 添加默认图层
    impleLayer.addTo(window.map);
	var featureStyle = {
		color: '#ff7800',
		weight: 1,
		opacity: 0.7,
		fill: false,
	};
  var szQuFeatures = {};
    // 添加边界图层
    var shenzhenStreetLayer = new L.GeoJSON.AJAX(shenzhenStreetJson, { style: streetStyle });
    var shenzhenLayer = new L.GeoJSON.AJAX(shenzhenJson, { style: featureStyle,
			onEachFeature: function (feature, layer) {
				var quName = feature.properties['QUNAME'];
				var polygons = feature.geometry.coordinates;
				var newPolygons = [];
				if (polygons.length > 1) {
					polygons.forEach(function (polygon) {
					let	newPolygon = [];
						polygon[0].forEach(function (point) {
							newPolygon.push([point[1], point[0]]);
						});
						newPolygons.push(newPolygon);
					});
				} else {
					polygons[0].forEach(function (point) {
						newPolygons.push([point[1], point[0]]);
					});
				}

				let	quFeature = szQuFeatures[quName];
				if (quFeature) {
					quFeature.push(newPolygons);
				} else {
					szQuFeatures[quName] = [newPolygons];
				}
			}, });
// console.log(streetsNameJson,'123123123');

      const streetsGeoJson = {
  type: "FeatureCollection",
  features: streetsNameJson.map(point => ({
    type: "Feature",
    properties: {
      name: point.name
    },
    geometry: {
      type: "Point",
      coordinates: [point.lng, point.lat]
    }
  }))
};

const areaGeoJson = {
  type: "FeatureCollection",
  features: areaNameJson.map(point => ({
    type: "Feature",
    properties: {
      name: point.areaName
    },
    geometry: {
      type: "Point",
      coordinates: [point.lng, point.lat]
    }
  }))
};
      // 修改 streetsNameLayer 的创建方式
      const streetsNameLayer = L.geoJSON(streetsGeoJson, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.divIcon({
        className: 'street-name-label',
        html: `<div>${feature.properties.name}</div>`,
        iconSize: [0, 0]
      })
    });
  }
});

const areaNameLayer = L.geoJSON(areaGeoJson, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.divIcon({
        className: 'area-name-label',
        html: `<div>${feature.properties.name}</div>`,
        iconSize: [0, 0]
      })
    });
  }
});



    var shenshanLayer = new L.GeoJSON.AJAX(shenshanJson, { style: featureStyle });
    var guangdongLayer = new L.GeoJSON.AJAX(guangdongJson, { style: featureStyle2 });
  
    // 修改图层控制配置
    const overlayMaps = {
      '深圳行政街道': shenzhenStreetLayer,
      '深圳行政区界': shenzhenLayer,
      '深汕特别区': shenshanLayer,
      '行政街道名称': streetsNameLayer, // 添加街道名称图层到控制器
      '行政区名称': areaNameLayer, // 添加区域名称图层到控制器
      '广东边界': guangdongLayer,

    };
  
    // 添加图层控制
    var layersControl = new L.Control.Layers(baseMaps, overlayMaps, { 
      collapsed: true,
      autoZIndex: true
    });
    window.map.addControl(layersControl);
  
    // 默认显示深圳行政街道和广东边界
    shenzhenStreetLayer.addTo(window.map);
    shenzhenLayer.addTo(window.map);  
    // guangdongLayer.addTo(window.map);
  
    // 创建并添加站点图层
    window.obtLayerGroup = L.layerGroup.collision({ 
      margin: 1,  // 增加边距
      isOpen: false,
      // removeOnCollision: true // 添加此选项
    });
  
    // 确保在添加到地图前设置碰撞状态
   window.obtLayerGroup.setOpen(false);
    // obtLayerGroup.value.addTo(window.map);
  
    try {
      // const obtData = await response.json();
      
      const {data:obtData}  = await getStationList();
      
      const uniqueAreas = new Set(obtData.map(station => station.area).filter(Boolean));
      // areaNames.value = Array.from(uniqueAreas);
      
      // 初始化区域标记存储
      window.areaMarker = {};
      // 先创建所有区域的数组
      areaNames.value.forEach(area => {
        window.areaMarker[area] = [];
      });
  
      const validStations = obtData.filter(station => station.lat && station.lng);
  // console.log(validStations,'12312414');
  // let makers = [];
      validStations.forEach(station => {
        // 确保站点有有效的经纬度和区域
        if (!station.lat || !station.lng || !station.name) {
          console.warn(`站点 ${station.code} 缺少有效的经纬度或区域信息`);
          return;
        }
  
        try {
          const lat = parseFloat(station.lat);
          const lng = parseFloat(station.lng);
          
          // 获取站点类型和对应的样式
          const stationType = getStationType(station.categoryname);
          const iconStyle = stationIconStyles.value[stationType] || stationIconStyles.value['自动站'];
          const textColor = stationIconStyles.value?.['字体颜色']?.color || '#333333';
  
          const customIcon = L.divIcon({
            className: `custom-div-icon station-${station.code}`,
            html: `
              <div class="station-container">
                <div class="station-marker" style="background-color: ${iconStyle.color}"></div>
                <div class="station-label ${showStationLabel.value ? 'show' : ''}">
                  <div class="station-name" style="color: ${textColor}">${station.name}</div>
                  <div class="station-id" style="color: ${textColor}">${station.code}</div>
                </div>
              </div>
            `,
            iconSize: [40, 40],
            iconAnchor: [10, 20]
          });
  
          const marker = L.marker([lat, lng], {
            icon: customIcon,
            title: station.name
          });
  
          // 添加站点ID到marker对象
          marker.stationId = station.code;
          marker.categoryname = station.categoryname;
          // 添加到对应的区域数组
          if (station.area && window.areaMarker[station.area]) {
           window.areaMarker[station.area].push(marker);
          }
          marker.setOpacity(0);
        // window.obtLayerGroup.addLayer(marker);
  
          // 添加事件监听器
          // marker.on('mouseover', () => handleStationHover(marker));
          // marker.on('mouseout', handleStationLeave);
          // marker.on('click', () => handleStationClick(marker));
  
        } catch (error) {
          console.error(`创建站点 ${station.OBTID} 的标记时出错:`, error);
        }
      });
      // console.log(  window.areaMarker,'12312414');
      
     window.map.addLayer(window.obtLayerGroup);
     
     
      // 初始化站点类型树 - 不再自动选中类型
      stationTypeTree.value = classifyStationsByType();
      
      // 在所有站点添加到 window.areaMarker 后，更新已添加站点列表
      const allStations = Object.values(window.areaMarker).flat();
      visibleStations.value = allStations.map(station => ({
        title: station.options.title,
        stationId: station.stationId,
        categoryname: station.categoryname,
        area: station.area // 添加区域信息用于排序
      }));
      
    } catch (error) {
      console.error('加载站点数据失败:', error);
    }
  
    // 在地图初始化后创建 marker
    pulseMarker.value = L.marker([0, 0], {
      icon: L.icon.pulse({
        iconSize: [5, 5],
        color: 'red',
        fillColor: 'red',
        heartbeat: 2
      }),
      opacity: 0.7
    });
  
    // 修改地图事件监听
    // window.map.on('zoomend moveend', () => {
    //   if (isCollisionEnabled.value && obtLayerGroup.value) {
    //     // 触发重新计算碰撞
    //     obtLayerGroup.value.setOpen(true);
    //   }
    // });
  
    // 初始化绘制图层
    drawnItems.value = new L.FeatureGroup();
    window.map.addLayer(drawnItems.value);
  
    // 配置 Geoman
    window.map.pm.setLang('zh');  // 设置中文
  
    // 设置全局选项，优化性能
    window.map.pm.setGlobalOptions({
      // 性能优化选项
      snappable: false,               // 禁用对齐功能
      snapDistance: 15,               // 减小对齐距离
      allowSelfIntersection: false,   // 禁止自相交
      preventMarkerRemoval: false,    // 允许删除标记
      syncLayersOnDrag: false,        // 拖动时不同步其他图层
      
      // 限制选项
      limitMarkersToCount: 100,       // 限制标记点数量
      limitMarkersToViewport: true,   // 只显示视口内的标记
      limitLatLngBounds: window.map.getBounds(),  // 限制绘制范围
      
      // 绘制选项
      finishOn: 'dblclick',          // 双击完成绘制
      continueDrawing: false,         // 完成后不继续绘制
      
      // 样式设置
      pathOptions: drawingStyle.value,
      
      // 标记选项
      markerStyle: {
        draggable: false,            // 禁用标记拖动
        snapIgnore: true             // 忽略标记对齐
      }
    });
  
    // 监听样式变化
    watch(drawingStyle, (newStyle) => {
      window.map.pm.setGlobalOptions({
        pathOptions: newStyle
      });
    }, { deep: true });
  
    // 修改 Geoman 控件配置
    window.map.pm.addControls({
      position: 'topright',
      drawMarker: {
        enabled: true,
        snappable: false
      },
      drawCircleMarker: {
        enabled: true,
        snappable: false
      },
      drawPolyline: {
        enabled: true,
        snappable: false,
        templineStyle: {
          color: '#3388ff',
          weight: 2
        },
        hintlineStyle: {
          color: '#3388ff',
          weight: 2,
          dashArray: [5, 5]
        }
      },
      drawRectangle: {
        enabled: true,
        snappable: false
      },
      drawPolygon: {
        enabled: true,
        snappable: false
      },
      drawCircle: {
        enabled: true,
        snappable: false
      },
      editMode: false,        // 禁用编辑模式
      dragMode: true,         // 保留拖动模式
      cutPolygon: false,       // 保留切割功能
      removalMode: true,      // 保留删除功能
      rotateMode: false       // 禁用旋转功能
    });
  
    // 优化事件处理
    let drawTimeout = null;
    window.map.on('pm:create', (event) => {
      if (drawTimeout) {
        clearTimeout(drawTimeout);
      }
      drawTimeout = setTimeout(() => {
        const layer = event.layer;
        // 简化图形（如果是多边形或线）
        if (layer.simplify) {
          layer.simplify(0.0001);  // 简化容差
        }
        drawnItems.value.addLayer(layer);
      }, 100);
    });
  
   
  
    // 修改地图事件监听
    // window.map.on('zoomend moveend', () => {
    //   if (isCollisionEnabled.value && obtLayerGroup.value) {
    //     // 触发重新计算碰撞
    //     obtLayerGroup.value.setOpen(true);
    //   }
  // });
  
    // 添加样式设置控件
    // const styleControl = new StyleControl();
    // window.map.addControl(styleControl);
  };
  
  // 修改处理站点点击的函数
  const handleNodeClick = (data) => {
    try {
      // 只处理站点节点的点击
      if (data.isStation) {
        // 从所有区域中找到对应的 marker
        const marker = Object.values(window.areaMarker)
          .flat()
          .find(m => m.stationId === data.id);
  
        if (marker) {
          const latLng = marker.getLatLng();
          window.map.once('moveend', () => {
            handleStationLeave();
          });
          handleStationHover(marker);
          window.map.flyTo(latLng, 14, {
            duration: 1.5,
            easeLinearity: 0.25
          });
          // if (selectedStations.value.has(data.id)) {
          //   toggleStation(data.id);
          // }
        }
      }
    } catch (error) {
      console.error('处理站点点击时出错:', error);
    }
  };
  
  // 在 setup 中添加
  const mapTitle = ref('深圳市地图');
  const showTitleEdit = ref(false);
  const titleStyle = ref({
    fontSize: 16,
    color: '#333333',
    fontWeight: 'normal'
  });
  
  // 修改保存标题的方法
  const saveTitle = () => {
    showTitleEdit.value = false;
    localStorage.setItem('mapTitle', mapTitle.value);
    localStorage.setItem('titleStyle', JSON.stringify(titleStyle.value));
  };
  
  // 修改 updateStationLabel 函数
  const updateStationLabel = (marker) => {
    if (!marker || !marker.options || !marker.options.icon) return;

    const stationType = getStationType(marker.categoryname);
    const iconStyle = stationIconStyles.value[stationType] || stationIconStyles.value['自动站'];
    const textColor = stationIconStyles.value?.['字体颜色']?.color || '#333333';

    // 只更新未被选中的站点的标签
    if (!selectedStations.value.has(marker.stationId)) {
      const customIcon = L.divIcon({
        className: `custom-div-icon station-${marker.stationId}`,
        html: `
          <div class="station-container">
            <div class="station-marker" style="background-color: ${iconStyle.color}"></div>
            <div class="station-label ${(showStationLabel.value || showStationId.value) ? 'show' : ''}">
              ${showStationLabel.value ? `<div class="station-name" style="color: ${textColor}">${marker.options.title}</div>` : ''}
              ${showStationId.value ? `<div class="station-id" style="color: ${textColor}">${marker.stationId}</div>` : ''}
            </div>
          </div>
        `,
        iconSize: [40, 40],
        iconAnchor: [10, 20]
      });
      marker.setIcon(customIcon);
    }
  };
  
  // 修改碰撞检测控制函数
  const toggleCollision = () => {
    isCollisionEnabled.value = !isCollisionEnabled.value;
    if (window.obtLayerGroup) {
      window.obtLayerGroup.setOpen(isCollisionEnabled.value);
    }
    updateStationMarkers(true);
  };
  
  // 修改防抖函数
  const debouncedUpdate = _.debounce((forceUpdate = false) => {
    if (window.obtLayerGroup) {
      updateStationMarkers(forceUpdate);
    }
  }, 100);
  
  // 修改初始化部分
  onMounted(async () => {
    try {
      // 1. 加载保存的配置
      const savedIconStyles = localStorage.getItem('stationIconStyles');
      if (savedIconStyles) {
        stationIconStyles.value = JSON.parse(savedIconStyles);
      }
  
      const savedTitle = localStorage.getItem('mapTitle');
      if (savedTitle) {
        mapTitle.value = savedTitle;
      }
      
      const savedStyle = localStorage.getItem('titleStyle');
      if (savedStyle) {
        titleStyle.value = JSON.parse(savedStyle);
      }
  
      // 2. 初始化地图（只初始化一次）
      // if (!window.map) {
        await initMap();
      // }
  
      // 3. 设置初始状态
      selectedAreas.value = [];
      isCollisionEnabled.value = false;
      
      // 创建并添加站点图层
      window.obtLayerGroup = L.layerGroup.collision({ 
        margin: 1,
        isOpen: false
      });
      window.map.addLayer(window.obtLayerGroup);
  
      // 4. 更新站点显示
      updateStationMarkers();

      const {data:obtData} = await getStationList();
      
      // 初始化时所有站点都是选中状态
      selectedStations.value = new Set(); // 初始为空，表示所有站点都是选中的

      // ... 处理站点数据 ...

      // 添加所有站点到地图和已添加列表
      const allStations = Object.values(window.areaMarker).flat();
      allStations.forEach(marker => {
        marker.setOpacity(1);
        window.obtLayerGroup.addLayer(marker);
      });

      // 更新已添加站点列表（保持排序）
      visibleStations.value = allStations.map(station => ({
        title: station.options.title,
        stationId: station.stationId,
        categoryname: station.categoryname,
        area: station.area // 添加区域信息用于排序
      }));

    } catch (error) {
      console.error('初始化失败:', error);
    }
  });
  
  
  
  // 修改经纬度验证函数
  const isValidLatLng = (latLng) => {
    return latLng 
      && typeof latLng.lat === 'number'
      && typeof latLng.lng === 'number'
      && !isNaN(latLng.lat)
      && !isNaN(latLng.lng)
      && latLng.lat >= -90
      && latLng.lat <= 90
      && latLng.lng >= -180
      && latLng.lng <= 180;
  };
  
  // 添加站点图标配置
  const stationIconStyles = ref({
    // 自动站固定在第一位
    '自动站': { color: '#37d65f' },

    // 按字数排序的其他类型
    '日照计': { color: '#37d65f' },
    '云高仪': { color: '#37d65f' },
    '回南天': { color: '#37d65f' },
    '测试站': { color: '#37d65f' },
    '风廓线': { color: '#37d65f' },
    '舒适度仪': { color: '#37d65f' },
    '通量系统': { color: '#37d65f' },
    '大气成分': { color: '#37d65f' },
    '微气候室': { color: '#37d65f' },
    '天气雷达': { color: '#37d65f' },
    '温室气体': { color: '#37d65f' },
    '闪电定位': { color: '#37d65f' },
    'GNSS/MET': { color: '#37d65f' },
    '大气电场仪': { color: '#37d65f' },
    '微波辐射计': { color: '#37d65f' },
    '风廓线雷达': { color: '#37d65f' },
    '太阳辐射': { color: '#37d65f' },
    'x波段雷达': { color: '#37d65f' },
    '多下垫面地温': { color: '#37d65f' },
    '气象实景视频': { color: '#37d65f' },
    '自动站-智能杆': { color: '#37d65f' },
    '自动站-船载站': { color: '#37d65f' },
    '自动站-潮汐站': { color: '#37d65f' },
    '自动站-石油平台': { color: '#37d65f' },
    '激光雨滴谱仪': { color: '#37d65f' },
    '气象梯度观测塔': { color: '#37d65f' },
 

    // 字体颜色固定在最后
    '字体颜色': { color: '#649FB1' }
  });
  
  // 添加临时存储的图标样式配置
  const tempIconStyles = ref(null);
  
  // 修改图标设置对话框打开时的处理
  const handleIconSettingsOpen = () => {
    // 确保有默认配置
    const defaultStyles = {
      // 自动站固定在第一位
      '自动站': { color: '#37d65f' },

      // 按字数排序的其他类型
      '日照计': { color: '#37d65f' },
      '云高仪': { color: '#37d65f' },
      '回南天': { color: '#37d65f' },
      '测试站': { color: '#37d65f' },
      '风廓线': { color: '#37d65f' },
      '舒适度仪': { color: '#37d65f' },
      '通量系统': { color: '#37d65f' },
      '大气成分': { color: '#37d65f' },
      '微气候室': { color: '#37d65f' },
      '天气雷达': { color: '#37d65f' },
      '温室气体': { color: '#37d65f' },
      '闪电定位': { color: '#37d65f' },

      'GNSS/MET': { color: '#37d65f' },
      '大气电场仪': { color: '#37d65f' },
      '微波辐射计': { color: '#37d65f' },
      '风廓线雷达': { color: '#37d65f' },
      '太阳辐射': { color: '#37d65f' },
      'x波段雷达': { color: '#37d65f' },
      '多下垫面地温': { color: '#37d65f' },
      '气象实景视频': { color: '#37d65f' },
      '自动站-智能杆': { color: '#37d65f' },
      '自动站-船载站': { color: '#37d65f' },
      '自动站-潮汐站': { color: '#37d65f' },
      '自动站-石油平台': { color: '#37d65f' },
      '激光雨滴谱仪': { color: '#37d65f' },
      '气象梯度观测塔': { color: '#37d65f' },

      // 字体颜色固定在最后
      '字体颜色': { color: '#649FB1' }
    };
    
    // 使用当前配置或默认配置
    tempIconStyles.value = stationIconStyles.value ? 
      JSON.parse(JSON.stringify(stationIconStyles.value)) : 
      JSON.parse(JSON.stringify(defaultStyles));
    
    showIconSettings.value = true;
  };
  
  // 修改保存图标设置的方法
  const saveIconSettings = () => {
    showIconSettings.value = false;
    // 使用临时配置更新正式配置
    stationIconStyles.value = tempIconStyles.value;
    // 保存到本地存储
    localStorage.setItem('stationIconStyles', JSON.stringify(stationIconStyles.value));
    // 更新所有图标
    updateAllStationIcons();
  };
  
  // 添加取消操作的处理
  const cancelIconSettings = () => {
    showIconSettings.value = false;
    // 恢复原来的配置
    tempIconStyles.value = null;
  };
  
  // 添加更新所有站点图标的方法
  const updateAllStationIcons = () => {
    if (!window.obtLayerGroup) return;
    window.obtLayerGroup.eachLayer(marker => {
   
    
      const stationType = getStationType(marker.categoryname);
      const iconStyle = stationIconStyles.value[stationType] || stationIconStyles.value['自动站'];
      
      
      const customIcon = L.divIcon({
        className: `custom-div-icon station-${marker.stationId}`,
        html: `
          <div class="station-container">
            <div class="station-marker" style="background-color: ${iconStyle.color}"></div>
            <div class="station-label ${showStationLabel.value ? 'show' : ''}">
              <div class="station-name" style="color: ${stationIconStyles.value?.['字体颜色'].color||'#89ABB4'}">${marker.options.title}</div>
              <div class="station-id" style="color: ${stationIconStyles.value?.['字体颜色'].color||'#89ABB4'}">${marker.stationId}</div>
            </div>
          </div>
        `,
        iconSize: [20, 20],
        iconAnchor: [10, 20]
      });
      
      marker.setIcon(customIcon);
    });
  };
  const toggleStylePanelVisibility = () => {
    showStylePanel.value = !showStylePanel.value;
  };
  // 添加获取站点类型的辅助方法
  const getStationType = (categoryname) => {
  // console.log(stationId,'123123');
  // console.log(categoryname,'123123');
  return categoryname  
    // if (stationId.startsWith('G') && !stationId.startsWith('GB')) return '自动站';
    // if (stationId.startsWith('P')) return '微站';
    // if (stationId.startsWith('R')) return '雨量站';
    // if (stationId.startsWith('GB')) return '龙华自建站';
    // if (stationId.startsWith('O')) return '潮位站';
    // if (stationId.startsWith('S')) return '船载站';
    // return '其它';
  };
  
  // 在 setup 中添加 showIconSettings 的定义
  const showIconSettings = ref(false);
  
  // 添加处理区域筛选的函数
  const handleAreasChange = (val) => {
    updateStationMarkers();
  };
  
  // 修改初始化区域名称的方法
  const initAreaNames = () => {
    const areas = new Set();
    validStations.forEach(station => {
      // 只添加非 'all' 的有效区域
      if (station.AREA && station.AREA !== 'all') {
        areas.add(station.AREA);
      } 
    });
  };
  
  // 修改区域全选的处理方法
  const handleSelectAllAreas = () => {
    if (selectedAreas.value.length === areaNames.value.length) {
      // 取消全选：清空选中区域
      selectedAreas.value = [];
    } else {
      // 全选：选中所有区域
      selectedAreas.value = [...areaNames.value];
      // 初始化未初始化过的区域
      selectedAreas.value.forEach(area => {
        if (!initializedAreas.value.has(area) && window.areaMarker[area]) {
          initializedAreas.value.add(area);
        }
      });
    }

    // 更新站点类型树
    nextTick(() => {
      const allAreaStations = selectedAreas.value.reduce((acc, area) => {
        if (window.areaMarker[area]) {
          acc.push(...window.areaMarker[area]);
        }
        return acc;
      }, []);
      
      stationTypeTree.value = classifyStationsByType(allAreaStations);
    });
  };
  
  // 修改全选/反选的处理方法
  const handleSelectAll = () => {
    const currentStations = filteredStations.value;
    
    if (currentStations.every(station => selectedStations.value.has(station.stationId))) {
      // 取消全选
      currentStations.forEach(station => {
        selectedStations.value.delete(station.stationId);
        // 从地图上移除
        const marker = findMarkerById(station.stationId);
        if (marker) {
          window.obtLayerGroup.removeLayer(marker);
        }
      });
      // 更新已添加站点列表
      visibleStations.value = visibleStations.value.filter(station => 
        !currentStations.some(s => s.stationId === station.stationId)
      );
    } else {
      // 全选
      currentStations.forEach(station => {
        selectedStations.value.add(station.stationId);
        // 添加到地图
        const marker = findMarkerById(station.stationId);
        if (marker) {
          marker.setOpacity(1);
          window.obtLayerGroup.addLayer(marker);
          // 添加到已添加站点列表（如果不存在）
          if (!visibleStations.value.some(s => s.stationId === station.stationId)) {
            visibleStations.value.push({
              title: marker.options.title,
              stationId: marker.stationId,
              categoryname: marker.categoryname
            });
          }
        }
      });
    }
  };
  
  // 辅助函数：根据站点ID查找marker
  const findMarkerById = (stationId) => {
    for (const area in window.areaMarker) {
      const marker = window.areaMarker[area].find(m => m.stationId === stationId);
      if (marker) return marker;
    }
    return null;
  };
  
  // 修改添加站点到区域的逻辑
  const addMarkerToArea = (marker, area) => {
    // 只添加到对应的区域数组
    if (!window.areaMarker[area]) {
     window.areaMarker[area] = [];
    }
    window.areaMarker[area].push(marker);
  };
  
  // 添加一个计算属性来判断是否所有站点都被选中
  const isAllStationsSelected = computed(() => {
    const currentStations = filteredStations.value.filter(station => 
      !searchQuery.value || 
      station.options.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      station.stationId.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
    return currentStations.length > 0 && 
      currentStations.every(station => !selectedStations.value.has(station.stationId));
  });
  
  // 添加处理全选/反选站点的方法
  const handleSelectAllStations = () => {
    // 获取当前过滤后的站点列表
    const currentStations = filteredStations.value.filter(station => 
      !searchQuery.value || 
      station.options.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      station.stationId.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
    
    if (isAllStationsSelected.value) {
      // 如果当前全部选中，则全部取消选中
      currentStations.forEach(station => {
        // 取消选中（添加到 selectedStations）
        selectedStations.value.add(station.stationId);
        // 从地图上移除
        const marker = findMarkerById(station.stationId);
        if (marker) {
          window.obtLayerGroup.removeLayer(marker);
        }
      });
      // 从已添加站点列表中移除这些站点
      visibleStations.value = visibleStations.value.filter(station => 
        !currentStations.some(s => s.stationId === station.stationId)
      );
    } else {
      // 如果当前未全部选中，则全部选中
      currentStations.forEach(station => {
        // 选中（从 selectedStations 中移除）
        selectedStations.value.delete(station.stationId);
        // 添加到地图
        const marker = findMarkerById(station.stationId);
        if (marker) {
          marker.setOpacity(1);
          window.obtLayerGroup.addLayer(marker);
        }
      });
      // 更新已添加站点列表
      const allStations = Object.values(window.areaMarker).flat();
      visibleStations.value = allStations
        .filter(s => !selectedStations.value.has(s.stationId))
        .map(s => ({
          title: s.options.title,
          stationId: s.stationId,
          categoryname: s.categoryname
        }));
    }
    // 更新地图显示
    updateStationMarkers();
  };
  
  // 1. 首先在 script 部分引入 el-tree-v2
  
  // 2. 修改树相关的数据结构和方法
  const treeData = ref([]);  // 用于存储树形数据
  const treeProps = {
    value: 'id',
    label: 'label',
    children: 'children'
  };
  
  // 修改分类函数以适应新的树结构
  
  // 修改处理选中状态的方法
  
  
  // 修改获取选中键值的计算属性
  
  
  // 修改处理节点点击的方法
  
  // 添加动态高度计算
  const isCollapsed = ref(false);
  const treeHeight = ref(300); // 默认高度
    const togglePanel = () => {
        isCollapsed.value = !isCollapsed.value; // 切换状态
      }
  onMounted(() => {
    // 计算树的可用高度
    const updateTreeHeight = () => {
      const container = document.querySelector('.station-type-tree');
      if (container) {
        treeHeight.value = container.clientHeight || 300;
      }
    };
  
    // 初始计算
    updateTreeHeight();
    
    // 监听窗口大小变化
    window.addEventListener('resize', updateTreeHeight);
    
    // 组件卸载时移除监听
    onUnmounted(() => {
      window.removeEventListener('resize', updateTreeHeight);
    });
  });
  
  // 修改 updateStationMarkers 函数
  const updateStationMarkers = (forceUpdate = false) => {
        window.obtLayerGroup.setOpen(isCollisionEnabled.value);

    if (!window.obtLayerGroup) return;
  
    // 清空图层
    window.obtLayerGroup.clearLayers();
    
    // 获取所有站点
    Object.values(window.areaMarker).flat().forEach(marker => {
      // 只添加未被选中（即显示）的站点
      if (!selectedStations.value.has(marker.stationId)) {
        marker.setOpacity(1);
        updateStationLabel(marker);
        window.obtLayerGroup.addLayer(marker);
      }
    });
// console.log(isCollisionEnabled.value);

    // 设置碰撞检测状态
    
    // 确保图层添加到地图上
    if (!window.map.hasLayer(window.obtLayerGroup)) {
      window.map.addLayer(window.obtLayerGroup);
    }
  };
  
  // 添加全选/取消全选方法
  const handleSelectAllTypes = () => {
    if (checkedStationTypes.value.length === Object.keys(stationIconStyles.value).length - 1) {
      checkedStationTypes.value = [];
    } else {
      checkedStationTypes.value = Object.keys(stationIconStyles.value)
        .filter(type => type !== '字体颜色');
    }
    // 移除 updateStationMarkers 调用
  };
  
  // 添加切换单个类型的方法
  const toggleStationType = (type) => {
    if (type === '字体颜色') return;
    
    const index = checkedStationTypes.value.indexOf(type);
    if (index === -1) {
      checkedStationTypes.value.push(type);
    } else {
      checkedStationTypes.value.splice(index, 1);
    }
    // 移除 updateStationMarkers 调用
  };
  
  // 修改删除站点的方法
  const removeStation = (stationId) => {
    // 从所有区域中查找并移除站点
    for (const area in window.areaMarker) {
      const stations = window.areaMarker[area];
      const stationIndex = stations.findIndex(s => s.stationId === stationId);
      if (stationIndex !== -1) {
        const station = stations[stationIndex];
        // 从地图上移除
        window.obtLayerGroup.removeLayer(station);
        // 从已添加站点列表中移除
        visibleStations.value = visibleStations.value.filter(s => s.stationId !== stationId);
        // 更新站点列表中的选中状态
        selectedStations.value.add(stationId);
        break;
      }
    }
  };
  
  // 添加搜索相关的变量和计算属性
  const addedStationsSearchQuery = ref('');
  
  // 添加已添加站点的过滤计算属性
  const filteredVisibleStations = computed(() => {
    if (!addedStationsSearchQuery.value) {
      return visibleStations.value;
    }
    const query = addedStationsSearchQuery.value.toLowerCase();
    return visibleStations.value.filter(station => 
      station.title.toLowerCase().includes(query) ||
      station.stationId.toLowerCase().includes(query)
    );
  });
  </script>
  
  <template>
    <!-- 修改整体布局结构 -->
    <div class="page-container">
      <!-- header 会被自动插入到 body 的开始位置 -->
      
      <!-- 添加标题编辑对话框 -->
      <el-dialog
        v-model="showTitleEdit"
        title="标题设置"
        width="400px"
        :close-on-click-modal="false"
        :modal="false"
        :modal-append-to-body="false"
        :top="35"
      >
        <div class="title-settings">
          <div class="setting-item">
            <label>标题文本</label>
            <el-input v-model="mapTitle" placeholder="请输入地图标题"></el-input>
   </div>
          <div class="setting-item">
            <label>字体大小</label>
            <el-input-number 
              v-model="titleStyle.fontSize" 
              :min="12" 
              :max="48" 
              size="small"
            ></el-input-number>
          </div>
          <div class="setting-item">
            <label>字体颜色</label>
            <el-color-picker v-model="titleStyle.color"></el-color-picker>
          </div>
          <div class="setting-item">
            <label>字体粗细</label>
            <el-select v-model="titleStyle.fontWeight" size="small">
              <el-option label="正常" value="normal"></el-option>
              <el-option label="加粗" value="bold"></el-option>
              <el-option label="更粗" value="800"></el-option>
            </el-select>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showTitleEdit = false">取消</el-button>
            <el-button type="primary" @click="saveTitle">确定</el-button>
          </span>
  </template>
      </el-dialog>
      <el-dialog
      v-model="showIconSettings"
      title="站点图标设置"
      width="550px"
      :close-on-click-modal="false"
      :modal="false"
      :modal-append-to-body="false"
      :top="35"
      @close="cancelIconSettings"
    >
      <div class="icon-settings">
        <!-- <h4>图标颜色设置</h4> -->
        <div v-for="(style, type) in tempIconStyles" :key="type" class="icon-setting-item">
          <div class="type-info">
            <div class="type-icon" :style="{ backgroundColor: style.color }"></div>
            <label>{{ type }}</label>
          </div>
          <el-color-picker v-model="style.color" size="small" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelIconSettings">取消</el-button>
          <el-button type="primary" @click="saveIconSettings">确定</el-button>
        </span>
      </template>
    </el-dialog>
      <!-- 内容区域 -->
      <div class="content-container">
        <div class="map-container">
          <!-- 添加地图标题 -->
          <div class="map-title">
            <span class="title-text">{{ mapTitle }}</span>
          </div>
  
          <!-- 侧边抽屉 -->
          <div class="drawer" :class="{ 'drawer-closed': !isDrawerOpen }">
            <div class="drawer-content">
            
              <div class="drawer-body">
                <div class="layer-control">
                  <!-- 区域筛选 -->
                  <div class="area-filter">
                    <div class="filter-header">
                      <h4>区域筛选</h4>
                      <div 
                        class="select-all-btn" 
                        :class="{ 'is-selected': selectedAreas.length === areaNames.length }"
                        @click="handleSelectAllAreas"
                      >
                        {{ selectedAreas.length === areaNames.length ? '取消' : '全选' }}
                      </div>
                    </div>
                    <div class="area-buttons">
                      <el-button
                        v-for="name in areaNames"
                        :key="name"
                        :type="selectedAreas.includes(name) ? 'primary' : 'default'"
                        size="small"
                        class="area-btn"
                        @click="toggleArea(name)"
                      >
                        {{ name }}
                      </el-button>
                    </div>
                  </div>
  
                  <!-- 站点类型 -->
                  <div class="tree-container">
                    <div class="filter-header tree-header">
                      <h4>类别筛选</h4>
                      <div 
                        class="select-all-btn"
                        :class="{ 'is-selected': checkedStationTypes.length === Object.keys(stationIconStyles).length - 1 }"
                        @click="handleSelectAllTypes"
                      >
                        {{ checkedStationTypes.length === Object.keys(stationIconStyles).length - 1 ? '取消' : '全选' }}
                      </div>
                    </div>
                    <div class="type-btns">
                      <el-button
                        v-for="(style, type) in stationIconStyles"
                        :key="type"
                        class="type-btn"
                        size="small"
                        :type="checkedStationTypes.includes(type) ? 'primary' : 'default'"
                        @click="toggleStationType(type)"
                        v-show="type !== '字体颜色'"
                      >
                        {{ type }}
                      </el-button>
                    </div>
                  </div>
                 
  
                  <!-- 站点列表 -->
                  <div class="station-list">
                    <div class="station-list-header">
                      <div class="header-title">
                        <h4>站点列表</h4>
                        <span class="station-count">{{ filteredStations.length }}</span>
                      </div>
                      <div 
                        class="select-all-btn" 
                        :class="{ 'is-selected': isAllStationsSelected }"
                        @click="handleSelectAllStations"
                      >
                        {{ isAllStationsSelected ? '取消' : '全选' }}
                      </div>
                    </div>
                    
                    <!-- 添加搜索框 -->
                    <div class="search-box">
                      <input
                        type="text"
                        v-model="searchQuery"
                        placeholder="搜索站名或站号..."
                      >
                    </div>
  
                    <div class="station-items">
                      <!-- 修改 v-for 中的过滤条件，添加搜索功能 -->
                      <div v-for="station in filteredStations.filter(station => 
                        !searchQuery || 
                        station.options.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                        station.stationId.toLowerCase().includes(searchQuery.toLowerCase())
                      )" 
                        :key="station.stationId" 
                        class="station-item">
                        <div class="checkbox-wrapper">
                          <input
                            type="checkbox"
                            :checked="!selectedStations.has(station.stationId)"
                            @click.stop="toggleStation(station)"
                            @change.stop="() => {}"
                          >
                          <span 
                            class="station-info"
                            @click.prevent="handleStationClick(station)"
                            @mouseover.stop="handleStationHover(station)"
                            @mouseleave.stop="handleStationLeave"
                          >
                            {{ station.options.title }} ({{ station.stationId }})
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
  
                  <!-- 修改碰撞检测控制部分 -->
                  <div class="collision-control">
                    <button 
                      class="control-button"
                      :class="{ 'active': isCollisionEnabled }"
                      @click="toggleCollision"
                    >
                      避让
                    </button>
                  
                    <button 
                      class="control-button"
                      @click="handleIconSettingsOpen"
                    >
                      图标
                    </button>
                    <button 
                      class="control-button"
                      @click="showTitleEdit = true"
                    >
                      标题
                    </button>
                      <button 
                      class="control-button"
                      :class="{ 'active': showStationLabel }"
                      @click="toggleStationLabel"
                    >
                      站名
                    </button>
                    <button 
                      class="control-button"
                      :class="{ 'active': showStationId }"
                      @click="toggleStationId"
                    >
                      站号
                    </button>
                  </div>
  
                  <!-- 将样式面板改为弹窗 -->
                
                </div>
              </div>
            </div>
            <!-- 切换按钮 -->
            <div class="drawer-toggle" @click="toggleDrawer">
              <span class="toggle-icon" :class="{ 'icon-rotated': !isDrawerOpen }">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
              </span>
            </div>
          </div>
          
          <!-- 地图容器 -->
          <div id="map"></div>
        </div>
      </div>
    </div>
    <div 
    class="control-button-style"
    @click="toggleStylePanelVisibility"
  >
  <img  class="setting-icon" src="@/assets/images/setting.png" alt="style">
  </div>
  <div 
  v-if="showStylePanel" 
  class="style-panel-modal"
  @click.self="showStylePanel = false"
  >
  <div class="style-panel-content">
    <div class="style-panel-header">
      <h4>绘制样式设置</h4>
      <button class="close-button" @click="showStylePanel = false">×</button>
    </div>
    <div class="style-controls">
      <div class="style-item">
        <label>线条颜色</label>
        <input 
          type="color" 
          v-model="drawingStyle.color"
          class="color-picker"
        >
      </div>
      
      <div class="style-item">
        <label>填充颜色</label>
        <input 
          type="color" 
          v-model="drawingStyle.fillColor"
          class="color-picker"
        >
      </div>
      
      <div class="style-item">
        <label>线条宽度</label>
        <input 
          type="range" 
          v-model.number="drawingStyle.weight"
          min="1" 
          max="5" 
          step="0.5"
          class="range-slider"
        >
        <span>{{ drawingStyle.weight }}</span>
      </div>
      
      <div class="style-item">
        <label>填充透明度</label>
        <input 
          type="range" 
          v-model.number="drawingStyle.fillOpacity"
          min="0" 
          max="1" 
          step="0.1"
          class="range-slider"
        >
        <span>{{ drawingStyle.fillOpacity }}</span>
      </div>
      
      <div class="style-item">
        <label>线条样式</label>
        <select v-model="drawingStyle.dashArray" class="style-select">
          <option 
            v-for="style in dashStyles" 
            :key="style.value" 
            :value="style.value"
          >
            {{ style.label }}
          </option>
        </select>
      </div>
    </div>
  </div>
  </div>
    <!-- 在地图容器后添加可见站点列表 -->
    <div class="visible-stations-container" :class="{ 'collapsed': isCollapsed }">
      <!-- 添加展开/收缩按钮 -->
      <div class="toggle-btn" @click="togglePanel" :class="{ 'Panelclosed': isCollapsed }">
        <span class="toggle-icon"  :class="[{ 'icon-rotated': !isCollapsed },{ 'PanelIconclosed': isCollapsed }]">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
        </span>
      </div>
  
      <div class="visible-stations-panel">
        <div class="panel-header">
          <span>已添加站点</span>
          <span class="station-count">{{ visibleStations.length }}</span>
        </div>
        <!-- 添加搜索框 -->
        <div class="search-box">
          <input
            type="text"
            v-model="addedStationsSearchQuery"
            placeholder="搜索已添加站点..."
          >
        </div>
        <div class="station-list-content">
          <div v-for="station in filteredVisibleStations" 
               :key="station.stationId" 
               class="station-item">
            <div class="station-info" @click="handleStationClick(station)">
              {{ station.title }}（{{ station.stationId }}）
            </div>
            <button class="delete-btn" @click="removeStation(station.stationId)">
              ×
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <style scoped>
  /* 修改页面整体布局样式 */
  .page-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /* 内容区域样式 */
  .content-container {
    position: absolute;
    top: 0; /* 移除 header 高度的偏移 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  
  /* 修改地图容器样式 */
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  /* 修改抽屉样式 */
  .drawer {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    height: auto; /* 移除固定高度计算 */
    display: flex;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
  }
  
  .drawer-closed {
    transform: translateX(calc(-357px )); /* 调整偏移量以适应新的宽度 */
  }
  
  .drawer-content {
    width: 347px;
    height: 100%;
    background: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 8px; /* 减小内边距 */
    border-radius: 8px;
    display: flex;  /* 添加 flex 布局 */
    flex-direction: column;  /* 垂直方向排列 */
    overflow: hidden;  /* 移除滚动条 */
  }
  
  .drawer-toggle {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 80px;
    background: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
  }
  
  /* 抽屉关闭状态下的按钮样式 */
  .drawer-closed .drawer-toggle {
    background-color: #90c7f1; /* 浅蓝色背景 */
  }
  
  .drawer-toggle:hover {
    background: #f0f7ff; /* 修改悬停颜色，使其与新的颜色方案协调 */
  }
  
  /* 抽屉关闭状态下按钮的悬停效果 */
  .drawer-closed .drawer-toggle:hover {
    background-color: #9ccef7; /* 更深一点的浅蓝色 */
  }
  
  .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: #666;
  }
  .drawer-closed .toggle-icon {
    color: #fff;
  }
  .icon-rotated {
    transform: rotate(180deg);
  }
  
  .drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1;  /* 占用剩余空间 */
    overflow: hidden;  /* 防止溢出 */
  }
  
  #map {
    width: 100%;
    height: 100%;
  }
  .filter-header h3{
    margin: 0;
      font-size: 15px;
      color: #2c3e50;
      font-weight: 600;
  } 
  h3 {
    margin: 0;
    /* padding-bottom: 12px; */
    margin-bottom: 12px; /* 添加底部间距 */
    /* border-bottom: 2px solid #e8e8e8; */
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  /* 自定义滚动条样式 */
  .drawer-content::-webkit-scrollbar {
    display: none;
  }
  
  .layer-control {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 减小间距 */
    height: 100%;  /* 占满容器高度 */
    overflow: hidden;  /* 防止溢出 */
  }
  
  .layer-item,
  .layer-label {
    display: none;
  }
  
  /* 站点弹窗样式 */
  :deep(.station-popup) {
    padding: 8px;
  }
  
  :deep(.station-popup h4) {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 14px;
  }
  
  :deep(.station-popup p) {
    margin: 4px 0;
    font-size: 12px;
    color: #666;
  }
  
  /* 站点标签样式 */
  :deep(.custom-div-icon) {
    background: none;
    border: none;
  }
  
  :deep(.station-label) {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  :deep(.station-name) {
    /* margin-bottom: 2px; */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  }
  
  :deep(.station-id) {
    font-size: 11px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  }
  
  :deep(.station-label.show) {
    opacity: 1;
  }
  
  /* 修改区域筛选容器样式 */
  .area-filter {
    /* margin-top: 12px; */
    background: #f8fafc;  /* 添加浅色背景 */
    border-radius: 8px;
    padding: 6px 8px;
    /* margin-bottom: 12px; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .tree-container{
    background: #f8fafc;  /* 添加浅色背景 */
    border-radius: 8px;
    padding: 6px 8px;
    /* margin-bottom: 12px; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  /* 修改区域筛选标题样式，与站点列表保持一致 */
  .area-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  
  /* 统一的标题样式 */
  .area-filter h4,
  .tree-header h4,
  .station-list h4 {
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* 添加标题前的竖线装饰 */
  .area-filter h4::before,
  .tree-header h4::before,
  .station-list h4::before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: #90c7f1;
    border-radius: 2px;
  }
  
  /* 移除之前单独的标题样式 */
  .area-filter h4 {
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .tree-header h4 {
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
  }
  
  .station-list h4 {
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
  }
  
  /* 区域选项容器样式 */
  .area-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;  /* 减小选项之间的间距 */
  }
  
  /* 区域选项样式 */
  .area-option {
    padding: 4px 12px;  /* 减小内边距 */
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;  /* 减小字体大小 */
    transition: all 0.3s ease;
    line-height: 1.4;
  }
  
  .area-option:hover {
    background: #ecf5ff;
    border-color: #90c7f1;
  }
  
  .area-option.active {
    background: #90c7f1;
    border-color: #90c7f1;
    color: white;
    font-weight: 500;
  }
  
  .station-list {
    /* margin-top: 8px; */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* 关键：确保flex子元素可以正确滚动 */
    background: #f8fafc;
    border-radius: 8px;
    padding:6px 8px;
    /* margin-top: 12px; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .station-list-header {
       display: flex
  ;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 2px;
  }
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .station-count {
    font-size: 13px;
    color: #666;
    background: #f5f7fa;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e4e7ed;
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
  }
  
  /* 修改搜索框样式 */
  .search-box {
    padding: 2px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .search-box input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    transition: all 0.3s;
  }
  
  .search-box input:focus {
    border-color: #409eff;
  }
  
  .search-box input::placeholder {
    color: #c0c4cc;
  }
  
  /* 移除搜索图标相关样式 */
  .search-icon {
    display: none;
  }
  
  /* 修改站点列表项容器样式 */
  .station-items {
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border-radius: 0 0 8px 8px;
  }
  
  /* 修改站点列表项的样式 */
  .station-item {
    /* padding: 4px 8px; */
    border-radius: 4px;
    background-color: #f8fafc;  /* 添加浅色背景 */
    margin-bottom: 4px;  /* 添加底部间距 */
    transition: background-color 0.2s;
  }
  
  .station-item:hover {
    background-color: #f1f5f9;  /* 修改悬停时的背景色 */
  }
  
  .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
  }
  
  .checkbox-wrapper input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    transform: scale(0.9);  /* 稍微缩小复选框 */
  }
  
  .station-info {
    flex: 1;
    font-size: 12px;
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1.2;
  }
  
  .station-info:hover {
    background-color: #edf2f7;
    color: #3182ce;
  }
  
  /* 添加复选框包装器样式 */
  .checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* padding: 4px; */
  }
  
  /* 修改站点信息样式 */
  .station-info {
    flex: 1;
    font-size: 11px;
    color: #2c3e50;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    padding: 4px;
  }
  
  .station-info:hover {
    color: #90c7f1;
  }
  
  /* 修改悬停效果 */
  .station-item:hover {
    background: #ecf5ff;
    border-color: #90c7f1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* 修改控制按钮容器样式 */
  .collision-control {
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    background: #f8fafc;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  /* 统一的按钮样式 */
  .control-button {
    flex: 1;
    padding: 4px;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    color: #2c3e50;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  .control-button:hover {
    background: #ecf5ff;
    border-color: #90c7f1;
  }
  
  .control-button.active {
    background: #90c7f1;
    border-color: #90c7f1;
    color: white;
  }
  
  /* 移除原来的全屏控件样式 */
  :deep(.leaflet-control-fullscreen) {
    display: none;
  }
  
  /* 可以添加一些自定义样式来调整脉冲效果 */
  .leaflet-marker-icon.leaflet-pulse-icon {
    border: 3px solid red;
  }
  
  .leaflet-marker-icon.leaflet-pulse-icon::after {
    animation-duration: 2s;
    border-color: red;
  }
  
  .station-type-tree {
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    /* padding: 12px; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    max-height: 218px;
    overflow-y: auto;
   position: relative; /* 添加相对定位 */
   height: 208px;
  }
  
  .tree-header {
    display: flex
  ;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      padding-bottom: 8px;
  }
  
  .tree-header h4 {
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
  }
  
  /* 调整树内容的上边距，为固定header留出空间 */
  :deep(.t-tree) {
    height: calc(100% - 32px); /* 减去header的高度 */
    overflow-y: auto;
  margin-top: 8px; /* 添加一些顶部间距 */
  }
  
  :deep(.t-tree__item) {
    font-size: 13px;
  }
  
  :deep(.t-tree__item--active) {
    background-color: #e6f3ff;
  }
  
  /* 修改滚动条样式，移除多余的括号 */
  :deep(.t-tree)::-webkit-scrollbar {
    width: 4px;
  }
  
  :deep(.t-tree)::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 2px;
  }
  
  :deep(.t-tree)::-webkit-scrollbar-thumb {
    background: #90c7f1;
    border-radius: 2px;
    opacity: 0.8;
  }
  
  :deep(.t-tree)::-webkit-scrollbar-thumb:hover {
    background: #7ab5e9;
  }
  
  /* 添加站点节点的鼠标样式 */
  :deep(.t-tree-node[data-isStation="true"]) {
    cursor: pointer;
  }
  
  :deep(.t-tree-node[data-isStation="true"]:hover) {
    color: #90c7f1;
  }
  
  /* 移除 leaflet-draw 相关样式 */
  /* 添加 Leaflet.draw 相关样式 */
  :deep(.leaflet-draw-toolbar) {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  
  :deep(.leaflet-draw-toolbar a) {
    background-color: #fff;
  }
  
  :deep(.leaflet-draw-toolbar a:hover) {
    background-color: #f4f4f4;
  }
  
  :deep(.leaflet-draw-actions) {
    left: 35px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  }
  
  :deep(.leaflet-draw-actions a) {
    background-color: #fff;
    color: #333;
    font-size: 12px;
    padding: 6px 10px;
  }
  
  :deep(.leaflet-draw-actions a:hover) {
    background-color: #f4f4f4;
    color: #90c7f1;
  }
  
  /* Geoman 样式 */
  :deep(.leaflet-pm-toolbar) {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  
  :deep(.leaflet-pm-toolbar .leaflet-pm-icon) {
    background-color: #fff !important;
    border: none !important;
  }
  
  :deep(.leaflet-pm-toolbar .leaflet-pm-icon:hover) {
    background-color: #f4f4f4 !important;
  }
  
  :deep(.leaflet-pm-toolbar .active .leaflet-pm-icon) {
    background-color: #90c7f1 !important;
    color: white !important;
  }
  
  :deep(.leaflet-pm-actions) {
    left: 35px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    background: white;
    border-radius: 4px;
  }
  
  :deep(.leaflet-pm-actions a) {
    background-color: #fff;
    color: #333;
    font-size: 12px;
    padding: 6px 10px;
  }
  
  :deep(.leaflet-pm-actions a:hover) {
    background-color: #f4f4f4;
    color: #90c7f1;
  }
  
  /* 优化绘制时的样式 */
  :deep(.leaflet-pm-draggable) {
    cursor: move;
  }
  
  :deep(.leaflet-pm-dragging) {
    cursor: grabbing;
  }
  
  /* 添加样式配置面板样式 */
  .drawing-style-panel {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
  }
  
  .drawing-style-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #2c3e50;
  }
  
  .style-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }
  
  .style-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .style-item label {
    flex: 1;
    font-size: 12px;
    color: #606266;
  }
  
  .color-picker {
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .range-slider {
    flex: 1;
    height: 4px;
    background: #e4e7ed;
    border-radius: 4px;
    -webkit-appearance: none;
  }
  
  .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #409eff;
    cursor: pointer;
  }
  
  .style-select {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #606266;
    font-size: 12px;
  }
  
  .style-item span {
    min-width: 30px;
    text-align: right;
    font-size: 12px;
    color: #909399;
  }
  
  /* 移除原来的全屏弹窗样式 */
  .style-panel-modal {
    /* display: none; */
    padding: 8px;
    margin-top: 10px;
    position: fixed;
    right: 55px;
    top: 476px;
    background-color: white;
    z-index: 10001;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    animation: fadeInSlide 0.3s ease-out; /* 添加动画 */
  }
  
  /* 定义动画 */
  @keyframes fadeInSlide {
    from {
      opacity: 0;
      transform: translateY(-20px); /* 从上方滑入 */
    }
    to {
      opacity: 1;
      transform: translateY(0); /* 到达最终位置 */
    }
  }
  
  /* 添加新的弹出面板样式 */
  :deep(.style-control-container) {
    position: fixed !important;
    right: 5px !important;
    top: 476px !important;
    z-index: 1000 !important;
    pointer-events: none !important;
  }
  
  :deep(.style-panel-popup) {
    position: absolute;
    right: 35px;
    top: 0;
    width: 280px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transform-origin: right center;
    animation: slideIn 0.3s ease-out;
    z-index: 1000;
    padding: 16px;
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  :deep(.style-panel-popup .style-panel-content) {
    width: 100%;
  }
  .style-panel-content{
  
  }
  .style-panel-header{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 16px;
  }
  
  :deep(.style-panel-popup .style-controls) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }
  
  :deep(.style-panel-popup .style-item) {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 32px;
  }
  
  :deep(.style-panel-popup .style-item label) {
    width: 80px;
    flex-shrink: 0;
    font-size: 13px;
    color: #606266;
  }
  
  :deep(.style-panel-popup .color-picker) {
    width: 60px;
    height: 24px;
  }
  
  :deep(.style-panel-popup .range-slider) {
    flex: 1;
    min-width: 120px;
  }
  
  :deep(.style-panel-popup .style-select) {
    flex: 1;
    height: 28px;
  }
  
  /* 修改箭头位置 */
  :deep(.style-panel-popup::after) {
    top: 14px;
  }
  
  /* 修改控件按钮样式 */
  :deep(.leaflet-control-style) {
   
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666 !important;
    background: white !important;
  }
  
  :deep(.leaflet-control-style:hover) {
    background-color: #f4f4f4 !important;
    color: #333 !important;
  }
  
  /* 修改图层控制按钮和面板样式 */
  :deep(.leaflet-control-layers) {
    font-size: 14px !important;
    /* margin: 10px !important; */
    position: fixed !important;
    right: 45px !important;
    top: 159px !important;
    z-index: 1000 !important;
  }
  
  :deep(.leaflet-touch .leaflet-control-layers-toggle) {
    width: 30px !important;
    height: 30px !important;
    background-size: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
  }
  
  :deep(.leaflet-control-layers-expanded) {
    z-index: 100000;
    padding: 6px 10px !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    min-width: 160px !important;
  }
  
  :deep(.leaflet-control-layers-list) {
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto;
  }
  
  :deep(.leaflet-control-layers-base label,
  .leaflet-control-layers-overlays label) {
    padding: 4px 6px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s !important;
  }
  
  :deep(.leaflet-control-layers-base label:hover,
  .leaflet-control-layers-overlays label:hover) {
    background-color: #f5f7fa !important;
  }
  
  :deep(.leaflet-control-layers-separator) {
    margin: 8px 0 !important;
    border-top: 1px solid #ebeef5 !important;
  }
  
  /* 修改标题样式，使用动态样式 */
  .title-text {
    font-size: v-bind('titleStyle.fontSize + "px"');
    font-weight: v-bind('titleStyle.fontWeight');
    color: v-bind('titleStyle.color');
    white-space: nowrap;
    background-color:transparent;
  }
  
  /* 添加标题设置对话框样式 */
  .title-settings {
    padding: 10px;
  }
  
  .setting-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .setting-item label {
    width: 80px;
    flex-shrink: 0;
    color: #606266;
  }
  
  .setting-item :deep(.el-input),
  .setting-item :deep(.el-input-number),
  .setting-item :deep(.el-select) {
    flex: 1;
  }
  
  /* 对话框样式调整 */
  :deep(.el-dialog__body) {
    padding:5px 20px;
  }
  
  .dialog-footer {
    padding-top: 20px;
    text-align: right;
  }
  
  /* 添加标题配置按钮样式 */
  :deep(.leaflet-control-title) {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    background-color: white !important;
    color: #606266 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s !important;
  }
  
  :deep(.leaflet-control-title:hover) {
    background-color: #f5f7fa !important;
    border-color: #c0c4cc !important;
    color: #409eff !important;
  }
  
  /* 修改控制按钮样式以适应新的标题按钮 */
  .control-button {
    flex: 1;
    padding: 4px;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    color: #2c3e50;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  /* 添加地图标题样式 */
  .map-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color:transparent;
    padding: 8px 16px;
    border-radius: 4px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  }
  
  /* 修改对话框样式 */
  :deep(.el-dialog) {
    position: absolute !important;
    top: 200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
  
  /* 对话框样式调整 */
  :deep(.el-dialog__body) {
    padding:  20px 5px;
  }
  
  .dialog-footer {
    padding-top: 20px;
    text-align: right;
  }
  
  /* 添加站点标记样式 */
  :deep(.station-marker) {
    width: 12px;
    height: 12px;
    background-color: #37d65f;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    margin-top: 14px;
  }
  
  /* 移除默认的 marker 图标背景 */
  :deep(.custom-div-icon) {
    background: none;
    border: none;
  }
  
  /* 修改站点标记容器样式 */
  :deep(.station-container) {
    position: relative;
    width: 20px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 修改站点标记样式 */
  :deep(.station-marker) {
    width: 12px;
    height: 12px;
    background-color: #37d65f;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  }
  
  /* 添加站点标签样式 */
  :deep(.station-label) {
    margin-top: 14px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  :deep(.station-label.show) {
    opacity: 1;
  }
  
  :deep(.station-name) {
    color: #333;
    /* margin-bottom: 2px; */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);  /* 添加文字阴影提高可读性 */
  }
  
  :deep(.station-id) {
    color: #666;
    font-size: 11px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);  /* 添加文字阴影提高可读性 */
  }
  
  /* 添加图标设置样式 */
  .icon-settings {
    /* padding: 10px; */
      display: grid
  ;
  grid-template-columns: repeat(3, 1fr);
      gap: 10px;
  }
  
  .icon-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 15px; */
    padding: 8px;
    background: #f5f7fa;
    border-radius: 4px;
  }
  
  .type-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .type-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }
  
  .type-info label {
    font-size: 12px;
    color: #606266;
  }
  
  .divider {
    height: 1px;
    background-color: #e8e8e8;
    margin: 15px 0;
  }
  
  .text-color-settings {
    margin-bottom: 15px;
  }
  
  .icon-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 15px; */
    padding: 4px;
    background: #f5f7fa;
    border-radius: 4px;
    
  }
  
  .type-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .type-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }
  
  .type-info label {
    font-size: 14px;
    color: #606266;
  }
  
  /* 添加绘制工具栏的固定定位样式 */
  :deep(.leaflet-pm-toolbar.leaflet-pm-draw) {
    position: fixed !important;
    right: 5px !important;
    top: 200px !important;
    z-index: 1000 !important;
  }
  
  /* 添加编辑工具栏的固定定位样式 */
  :deep(.leaflet-pm-toolbar.leaflet-pm-edit) {
    position: fixed !important;
    right: 5px !important;
    top: 413px !important;
    z-index: 1000 !important;
  }
  
  /* 保持图层控制面板的原有样式 */
  :deep(.leaflet-control-layers) {
    position: fixed !important;
    right: 5px !important;
    top: 159px !important;
    z-index: 1000 !important;
  }
  
  :deep(.leaflet-control-layers-expanded) {
    z-index: 1000;
    padding: 6px 10px !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    min-width: 160px !important;
  }
  
  :deep(.leaflet-control-layers-list) {
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto;
  }
  
  /* 控制按钮的基础层级 */
  :deep(.leaflet-control-layers) {
    position: fixed !important;
    right: 5px !important;
    top: 159px !important;
    z-index: 1000 !important;
  }
  
  /* 弹出的图层控制面板需要更高层级 */
  :deep(.leaflet-control-layers-expanded) {
    z-index: 2000 !important;  /* 确保在其他控件之上 */
    padding: 6px 10px !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    min-width: 160px !important;
    position: absolute !important;  /* 相对于控制按钮定位 */
    top: 0 !important;
    right: 0 !important;
  }
  
  /* 其他控件保持原有层级 */
  :deep(.leaflet-pm-toolbar.leaflet-pm-draw) {
    position: fixed !important;
    right:5px !important;
    top: 200px !important;
    z-index: 1000 !important;
  }
  
  :deep(.leaflet-pm-toolbar.leaflet-pm-edit) {
    position: fixed !important;
    right: 5px !important;
    top: 413px !important;
    z-index: 1000 !important;
  }
  
  :deep(.style-control-container) {
    position: fixed !important;
    right: 5px !important;
    top: 476px !important;
    z-index: 1000 !important;
    pointer-events: none !important
    ;
    height: 464px;
  }
  
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;  /* 添加左右内边距 */
    margin-bottom: 8px;
  }
  
  .select-all-btn {
    margin-right: 10px;
    cursor: pointer;
    color: #409EFF;
    font-size: 14px;
  }
  
  .area-buttons {
    display: flex;
    flex-wrap: wrap;
    /* padding: 0 10px; */
    width: 100%;  /* 确保容器占满宽度 */
  }
  
  .area-btn {
    font-size: 12px;
    padding: 4px 12px;
    width: calc(33.33% - 8px);  /* 每行三个按钮，减去间距 */
        margin: -4px 4px 6px 4px; /* 设置按钮间距 */
    text-align: center;  /* 文字居中 */
    white-space: nowrap;  /* 文字不换行 */
    overflow: hidden;  /* 超出部分隐藏 */
    text-overflow: ellipsis;  /* 超出显示省略号 */
  }
  .type-btn {
    font-size: 12px;
    padding: 4px 12px;
    width: calc(33.33% - 8px);  /* 每行三个按钮，减去间距 */
        margin: -4px 4px 6px 4px; /* 设置按钮间距 */   
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .type-btns{
    display: flex;
    flex-wrap: wrap;
    /* padding: 0 10px; */
    width: 100%;
  }
  
  /* 修改标题样式 */
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  
  .filter-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 500;
  }
  
  .select-all-btn {
    margin-right: 10px;
    cursor: pointer;
    color: #409EFF;
    font-size: 14px;
  }
  
  /* 优化滚动条样式 */
  .station-items::-webkit-scrollbar {
    width: 4px;
  }
  
  .station-items::-webkit-scrollbar-track {
    background: #f5f7fa;
  }
  
  .station-items::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
  }
  
  /* 修改样式以优化点击区域 */
  .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
    user-select: none; /* 防止文本被选中 */
  }
  
  .checkbox-wrapper input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0; /* 防止复选框被压缩 */
  }
  
  .station-info {
    flex: 1;
    font-size: 12px;
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1.2;
    pointer-events: auto; /* 确保可以接收点击事件 */
  }
  
  /* 修改全选按钮样式 */
  .select-all-btn {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    background-color: #ecf5ff;
    color: #409EFF;
    border: 1px solid #d9ecff;
    transition: all 0.3s;
  }
  
  .select-all-btn:hover {
    background-color: #409EFF;
    color: white;
    border-color: #409EFF;
  }
  
  .select-all-btn.is-selected {
    background-color: #409EFF;
    color: white;
    border-color: #409EFF;
  }
  
  .select-all-btn.is-selected:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
  
  /* 可见站点列表面板样式 */
  :deep(.visible-stations-panel) {
    margin-top: 10px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* max-height: 300px; */
    overflow-y: auto;
    width: 200px;
    height: 300px;
    pointer-events: auto;
    position: relative;
  }
  
  :deep(.panel-header) {
    padding: 8px 12px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 12px;
  }
  
  :deep(.station-count) {
    color: #909399;
    font-size: 12px;
  }
  
  :deep(.station-list-content) {
    padding: 8px;
    height: calc(100% - 90px); /* 减去头部和搜索框的高度 */
    overflow-y: auto;
  }
  
  :deep(.station-list-content .station-item) {
    padding: 1px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #f8fafc;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  :deep(.station-list-content .station-name) {
    color: #606266;
    margin-right: 8px;
  }
  
  :deep(.station-list-content .station-id) {
    color: #909399;
    font-size: 11px;
  }
  
  /* 优化滚动条样式 */
  :deep(.visible-stations-panel::-webkit-scrollbar) {
    width: 4px;
  }
  
  :deep(.visible-stations-panel::-webkit-scrollbar-track) {
    background: #f5f7fa;
  }
  
  :deep(.visible-stations-panel::-webkit-scrollbar-thumb) {
    background: #dcdfe6;
    border-radius: 2px;
  }
  
  /* 添加切换按钮样式 */
  :deep(.toggle-list-button) {
    position: absolute;
      left: -15px;
      top: 44%;
      width: 16px;
      height: 58px;
      background: white;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-right: none;
      border-radius: 10px 0 0 9px;
      display: flex
  ;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      display: none;
  }
  
  :deep(.toggle-list-button:hover) {
    background: #f5f7fa;
  }
  
  :deep(.toggle-list-button i) {
    font-size: 12px;
    color: #909399;
    transition: transform 0.3s;
  }
  
  :deep(.toggle-list-button.collapsed i) {
    transform: rotate(180deg);
  }
  
  /* 修改容器样式 */
  :deep(.style-control-container) {
    position: fixed !important;
    right: 5px !important;
    top: 476px !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    transition: transform 0.3s;
  }
  
  /* 可见站点列表面板样式 */
  :deep(.visible-stations-panel) {
    margin-top: 10px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* max-height: 300px; */
    overflow-y: scroll;
    width: 200px;
    pointer-events: auto;
    transition: all 0.3s;
    height: 100%;
  }
  
  /* 其他样式保持不变... */
  
  /* 修改容器样式 */
  .visible-stations-container {
    margin-top: 29px;
    position: fixed;
    right: 15px;
    bottom: 20px;
    /* top: 487px; */
    z-index: 1000;
    height: 384px;
    width: 200px;
    
    transition: transform 0.3s ease;
    display: flex;
  }
  
  .visible-stations-container.collapsed {
    transform: translateX(215px);
  }
  
  .toggle-btn {
    z-index: 1002;
      position: absolute;
      left: -19px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
    height: 80px;
    background-color: #fff; /* 更深一点的浅蓝色 */
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }
  
  .Panelclosed{
  background-color: #9ccef7; /* 更深一点的浅蓝色 */
  }
  .toggle-btn:hover {
    background: #f0f7ff;
  }
  
  .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: #cac6c6;;
    
  }
  .PanelIconclosed{
    color: #ffffff;
  
  }
  
  .icon-rotated {
    transform: rotate(180deg);
  }
  
  .visible-stations-panel {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
  }
  
  /* 其他现有样式保持不变 */
  
  .control-button-style{
    margin-top: 10px;
      position: fixed;
      right: 15px;
      top: 476px;
      z-index: 1000;
      width: 34px;
      height: 34px;
      /* background-color: #f4f4f4; */
      margin-top: 13px;
      ;
      background-color: #fff;
  
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .close-button{
    font-size: 16px;
  }
  .setting-icon{
    width: 25px;
    height: 25px;
  }
  .type-buttons{
      display: flex
;
    flex-wrap: wrap;
    /* padding: 0 10px; */
    width: 100%;
  }

  .visible-stations-panel {
    height: 100%;
    overflow-y: auto;
  }
  
  .panel-header {
    padding: 8px 12px;
    border-bottom: 1px solid #ebeef5;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .station-count {
    color: #909399;
    font-size: 12px;
  }
  
  .station-list-content {
    padding: 8px;
  }
  
  .station-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    /* margin-bottom: 8px; */
    background: #f8fafc;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .station-info {
    flex: 1;
    font-size: 12px;
    color: #606266;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .delete-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #909399;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 8px;
    transition: all 0.3s ease;
  }
  
  .delete-btn:hover {
    background: #f56c6c;
    color: white;
  }
  
  .station-item:hover {
    background: #ecf5ff;
  }
  </style>
  
  <style>
  /* 添加街道名称标签样式 */
  .street-name-label {
    color: #727272;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .area-name-label{
    color: #727272;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    background: transparent;
    border: none;
    box-shadow: none;
  }
.area-name-label div {
    position: relative;
    text-align: center;
    padding: 2px 4px;
    white-space: nowrap;
  }
  .street-name-label div {
    position: relative;
    text-align: center;
    padding: 2px 4px;
    white-space: nowrap;
  }
  </style>
  
  